<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="<%=request.getContextPath()%>/css/demo.css" rel="stylesheet"
	type="text/css" />
<script src="<%=request.getContextPath()%>/js/scripts/boot.js"
	type="text/javascript"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <title>道路监控记录数据展示</title>
</head>
<body>
    <h1>道路监控时刻统计表</h1>
    <input type="button" value="OpenChart" onclick="showChartWindow()" />
    <div id="win1" class="mini-window" title="单位（人次）" style="width:580px;height:450px;"
         showToolbar="false" showFooter="true" showModal="true" allowResize="true">

        <div  id="chartContainer" style="height:100%;width:100%;">></div>


    </div>
    
</body>
</html>

<script type="text/javascript">
    mini.parse();

    var colors = ['#5793f3', '#d14a61', '#675bba'];

    var option = {
    	    color: colors,

    	    tooltip: {
    	        trigger: 'none',
    	        axisPointer: {
    	            type: 'cross'
    	        }
    	    },
    	    legend: {
    	        data:['2016违章人次', '2017违章人次']
    	    },
    	    grid: {
    	        top: 70,
    	        bottom: 50
    	    },
    	    xAxis: [
    	        {
    	            type: 'category',
    	            axisTick: {
    	                alignWithLabel: true
    	            },
    	            axisLine: {
    	                onZero: false,
    	                lineStyle: {
    	                    color: colors[1]
    	                }
    	            },
    	            axisPointer: {
    	                label: {
    	                    formatter: function (params) {
    	                        return '违章人次  ' + params.value
    	                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
    	                    }
    	                }
    	            },
    	            data: ["2017-1", "2017-2", "2017-3", "2017-4", "2017-5", "2017-6", "2017-7", "2017-8", "2017-9", "2017-10", "2017-11", "2017-12"]
    	        },
    	        {
    	            type: 'category',
    	            axisTick: {
    	                alignWithLabel: true
    	            },
    	            axisLine: {
    	                onZero: false,
    	                lineStyle: {
    	                    color: colors[0]
    	                }
    	            },
    	            axisPointer: {
    	                label: {
    	                    formatter: function (params) {
    	                        return '违章人次 ' + params.value
    	                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
    	                    }
    	                }
    	            },
    	            data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
    	        }
    	    ],
    	    yAxis: [
    	        {
    	            type: 'value'
    	        }
    	    ],
    	    series: [
    	        {
    	            name:'2016违章人次',
    	            type:'line',
    	            xAxisIndex: 1,
    	            smooth: true,
    	            data: [2630, 5900, 2900, 2813, 2781, 2103, 1756, 1822, 1487, 1848, 1993, 2003]
    	        },
    	        {
    	            name:'2017违章人次',
    	            type:'line',
    	            smooth: true,
    	            data: [2982, 4121, 2933, 2781, 2103, 1756, 1822, 1487,2813, 2781, 1433, 2931]
    	        }
    	    ]
    	};



    function buildChart() {

        var chart = echarts.init(document.getElementById('chartContainer'));
        chart.setOption(option);
    }
    function showChartWindow() {
        var win = mini.get("win1");
        win.show();
        buildChart();
    }
    showChartWindow()
</script>